<template>
  <div class="title">
    <p>Help&FAQs</p>
    <hr />
  </div>
  <div class="col">
    <div class="row">
      <h3>
        <a href="#anchorPoint1">1. What information is available in MicroPD?</a>
      </h3>
      <h3><a href="#anchorPoint2">2. Database content and construction</a></h3>
      <h3>
        <a href="#anchorPoint3"> 3. How to use the MicroPD?</a>
        <h4><a href="#search">3.1 Search</a></h4>
        <h4><a href="#dataBrowse">3.2 Data-Browse</a></h4>
        <h4><a href="#genomeBrowser">3.3 Genome-Browser</a></h4>
        <h4><a href="#download">3.4 Download</a></h4>
      </h3>
      <h3>
        <a href="#anchorPoint4"> 4. Frequently Asked Questions</a>
        <h4>
          <a href="#anchorPoint4.1"
            >4.1 Why "None" is shown somewhere in microbial taxonomy?</a
          >
        </h4>
        <h4>
          <a href="#anchorPoint4.2"
            >4.2 Why does MicroPD not fully cover all currently known
            microbes?</a
          >
        </h4>
      </h3>
      <h3><a href="#anchorPoint5">5. Development environment</a></h3>
      <h3><a href="#anchorPoint6">6. Update</a></h3>
      <h3><a href="#anchorPoint7">7. Contact us</a></h3>
    </div>
  </div>
  <hr />
  <div class="cardBox">
    <div class="card_title" id="anchorPoint1">
      1. What information is available in MicroPD?
    </div>
    <div class="card_content">
      The effective detection of microorganisms relies on primers that exhibit
      high specificity and sensitivity. However, primers based on conserved 16S
      rRNA or ITS can no longer meet the demands for extensive microbial
      detection. There is a pressing need to design more specific primers based
      on functional genes for rapid detection of microorganisms in mixed
      samples. Here, we developed A PCR Primer Database for Microorganism
      detection (<span class="highlight">MicroPD</span> at
      <a
        href="https://www.primerbanks.com"
        class="highlight"
        style="font-style: italic; text-decoration: underline"
        >https://www.primerbanks.com/</a
      >) aiming to provide a large number of available primer pairs for microbe
      detecting and analysis. In addition, MicroPD also provides functional
      genes of the corresponding primers.
    </div>
  </div>
  <div class="cardBox">
    <div class="card_title" id="anchorPoint2">
      2. Database content and construction
    </div>
    <div class="card_content">
      Currently, MicroPD documents
      <span class="highlight"
        >33694811 primer pairs from 10309494 functional genes derive from 47233
        genomes.</span
      >
      These primers covered
      <span class="highlight"
        >14 kingdom, 73 Phylum, 178 class, 399 order, 1033 family, 5997 genus,
        8666 species and 34702 organisms</span
      >, involving bacteria, viruses and fungi microbe. For more detailed
      statistics, please see the "Statistics" page. We constructed MicroPD by
      integrated primers and functional genes with microbial taxonomy
      information.
      <div class="image" style="padding: 20px 350px">
        <img src="@/assets/images/help1.png" alt="" />
      </div>
      MicroPD systematically retrieved and downloaded the genomes and taxonomy
      information of bacterial viruses and fungi. MicroPD identified specific
      functional genes based on these genomes by a self-developed computational
      pipeline. Then, MicroPD designed specific primer based on specific
      functional genes using primer3 program (<a
        href="https://github.com/primer3-org/primer3"
        target="_blank"
        class="highlight"
        style="font-style: italic; text-decoration: underline"
        >https://github.com/primer3-org/primer3</a
      >). Therefore, MicroPD provides information on specific primer pairs for
      bacteria, viruses and fungi, as well as their corresponding functional
      genes. The metadata includes end stability, GC content, hairpin TH,
      sequence, product size, gene id, strand, gene length and taxonomy
      information of microbe, and etc. MicroPD integrates customized genome
      browser and developed multiple tools to help visualize those specific
      primer pairs.
    </div>
  </div>
  <div class="cardBox">
    <div class="card_title" id="anchorPoint3">3. How to use the MicroPD?</div>
    <div class="card_content">
      <el-collapse v-model="activeNames" @change="handleChange" id="search">
        <el-collapse-item id="search" title="3.1 Search" name="1">
          <div class="itemFontSize">
            <div class="alignment">
              Users can quickly query for specific primer pairs by TAXID,
              species, strain, etc. Additionally, MicroPD supports three
              <span class="highlight">different searching modes</span>:
              "Bacteria", "Viruses", and "Fungi". MicroPD supports searching for
              specific primers by Kingdom, Phylum, Class, Order, Family, Genus,
              and Species. Brief search results are presented as a table in the
              result page.
              <div>
                As an example, users can choose Kingdoms: Bacillati, Phylum:
                Bacillota, Class: Bacilli, Order: bacillales, Family:
                Bacillaceae, Genus: Bacillus, Speices: Bacillus mycoides in
                "Bacteria" mode. Search results are displayed below, including
                Primer ID, Gene ID, Product size, Penalty, UniRef90, UniRef50,
                UniRef90/50, Score, Organism name, Species, Strain, Taxid,
                Assembly. Users can download the full results of the search by
                clicking the "Export complete table" button. In addition, users
                can click the "Primer ID" to view details about each primer in
                the search results.
              </div>
            </div>
            <div class="image">
              <img src="@/assets/images/help2.png" alt="" />
            </div>
            <div class="alignment">
              In detail page, Users can not only view detailed information about
              primer of interest, but also access gene information. Users can
              download the nucleic acid and protein sequences of a gene by
              clicking "Nucleic acid sequence" and "Protein sequence" buttons,
              respectively. In addition, users can browse the primers and
              corresponding gene in genome browser by clicking "primer Browser"
              and "Genome Browser" buttons.
            </div>
          </div>
        </el-collapse-item>
        <hr id="dataBrowse" />
        <el-collapse-item id="dataBrowse" title="3.2 Data-Browse" name="2">
          <div class="itemFontSize">
            <div class="alignment">
              The
              <a
                href="/dataBrowse"
                class="highlight"
                style="font-style: italic; text-decoration: underline"
                >Data-Browse</a
              >
              page is an interactive table of alphanumeric"Data-Browse" page is
              an interactive table of alphanumeric sorting that allows users to
              quickly browse for primers and customize filters through
              "Microbe", "Kingdom", "Phylum", "Class", "Order", "Family",
              "Genus", and "Species". To view the detail information for a given
              primer, users only need to click on the "Primer ID" to view it.
            </div>
            <div class="image">
              <img src="@/assets/images/help3.png" alt="" />
            </div>
          </div>
        </el-collapse-item>
        <hr id="genomeBrowser" />
        <el-collapse-item title="3.3 Genome-Browser" name="3">
          <div class="itemFontSize">
            <div class="alignment">
              To help users view the primer pairs and functional genes derived
              from different microbial genomes, we integrated these
              comprehensive data into MicroPD, made a customized genome browser
              to visualize them simultaneously.
            </div>
            <div class="image">
              <img src="@/assets/images/help4.png" alt="" />
            </div>
          </div>
        </el-collapse-item>
        <hr id="download" />
        <el-collapse-item title="3.4 Download" name="4">
          <div class="itemFontSize">
            <div class="alignment">
              The "<a
                href="/download"
                class="highlight"
                style="font-style: italic; text-decoration: underline"
                >Download</a
              >" page is an interactive table of alphanumeric sorting that
              allows users to quickly browse and download data related of
              primers and customize filters through "Microbe", "Kingdom",
              "Phylum", "Class", "Order", "Family", "Genus", and "Species". To
              download the related data for a given microbe, users only need to
              click on the corresponding download buttons to download it.
            </div>
            <div class="image">
              <img src="@/assets/images/help5.png" alt="" />
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
  <div class="cardBox">
    <div class="card_title" id="anchorPoint4">
      4. Frequently Asked Questions
    </div>
    <div class="card_content">
      <div
        class=""
        id="anchorPoint4.1"
        style="text-align: left; font-weight: 550"
      >
        <div>4.1 Why "None" is shown somewhere in microbial taxonomy?</div>
        <div style="font-weight: 500">
          Answer: The taxonomy of microorganisms was download from NCBI taxonomy
          database, and we referenced this taxonomy. Displayed as "None" because
          there is no corresponding classification.
        </div>
      </div>
      <div
        class=""
        style="text-align: left; margin-top: 20px; font-weight: 550"
        id="anchorPoint4.2"
      >
        <div>
          4.2 Why does MicroPD not fully cover all currently known microbes?
        </div>
        <div style="font-weight: 500">
          Answer: We download all genomes annotated by NCBI RefSeq. However,
          some genomes will be filtered out during the data processing
          (completeness and contamination, etc). In addition, it is possible
          that specific functional genes cannot be identified from certain
          genomes by our functional gene identification algorithm. Therefore,
          some microbes did not have specific functional genes identified, nor
          corresponding specific primer pairs.
        </div>
      </div>
    </div>
  </div>
  <div class="cardBox">
    <div class="card_title" id="anchorPoint5">5. Development environment</div>
    <div class="card_content">
      MicroPD is developed using MySQL 8 and running on a Linux-based Nginx Web
      server. We used Python 3.8 and Django 2.2.16 for server-side scripting to
      provide query and view supports from the database backend. We designed and
      built a user-friendly interactive web interface using vue3 (<a
        href="https://vuejs.org/"
        target="_blank"
        class="highlight"
        style="font-style: italic; text-decoration: underline"
        >https://vuejs.org/</a
      >) frameworks. We applied E-Charts 5.5.1 as graphical visualization
      frameworks. We embedded JBrowse2 (<a
        href="https://jbrowse.org/jb2/"
        target="_blank"
        class="highlight"
        style="font-style: italic; text-decoration: underline"
        >https://jbrowse.org/jb2/</a
      >) as genome browser framework. The overall aesthetic of the website has
      been enhanced through the use of Element UI 2.8.7. We recommend to visit
      MicroPD using a modern web browser that supports the HTML5 standard such
      as Firefox, Google Chrome, Safari, or Microsoft Edge. The MicroPD database
      is freely available for the research community at
      <a
        href="https://www.primerbanks.com/"
        target="_blank"
        class="highlight"
        style="font-style: italic; text-decoration: underline"
        >https://www.primerbanks.com/</a
      >. Users are not required to register or login to access the data in the
      database.
    </div>
  </div>
  <div class="cardBox">
    <div class="card_title" id="anchorPoint6">6. Update</div>
    <div class="card_content">
      We are further optimizing the specific functional gene identification
      algorithms and primer design algorithms to cover more microorganisms. At
      the same time, we are updating the algorithms for identifying specific
      functional genes at different levels (family, genus, species, etc) to
      design specific primers for microbes at different levels. More available
      specific primer and visualization tools will be added.
    </div>
  </div>
  <div class="cardBox">
    <div class="card_title" id="anchorPoint7">7. Contact us</div>
    <div class="card_content">
      If have any problems or suggestions, please contact Prof. Ailong Huang by
      e-mail:
      <a
        href="mailto:ahuang1964@163.com"
        target="_blank"
        class="highlight"
        style="font-style: italic; text-decoration: underline"
        >ahuang1964@163.com</a
      >.
    </div>
  </div>
  <!-- 自定义位置和内容 -->
  <BackToTop size="big" right="60px" bottom="170px">
    <div class="custom-content">
      <svg
        t="1747127156663"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="6338"
        width="30"
        height="50"
      >
        <path
          d="M752.736 431.063C757.159 140.575 520.41 8.97 504.518 0.41V0l-0.45 0.205-0.41-0.205v0.41c-15.934 8.56-252.723 140.165-248.259 430.653-48.21 31.457-98.713 87.368-90.685 184.074 8.028 96.666 101.007 160.768 136.601 157.287 35.595-3.482 25.232-30.31 25.232-30.31l12.206-50.095s52.47 80.569 69.304 80.528c15.114-1.23 87-0.123 95.6 0h0.82c8.602-0.123 80.486-1.23 95.6 0 16.794 0 69.305-80.528 69.305-80.528l12.165 50.094s-10.322 26.83 25.272 30.31c35.595 3.482 128.574-60.62 136.602-157.286 8.028-96.665-42.475-152.617-90.685-184.074z m-248.669-4.26c-6.758-0.123-94.781-3.359-102.891-107.192 2.95-98.714 95.97-107.438 102.891-107.93 6.964 0.492 99.943 9.216 102.892 107.93-8.11 103.833-96.174 107.07-102.892 107.192z m-52.019 500.531c0 11.838-9.42 21.382-21.012 21.382a21.217 21.217 0 0 1-21.054-21.34V821.74c0-11.797 9.421-21.382 21.054-21.382 11.591 0 21.012 9.585 21.012 21.382v105.635z m77.333 57.222a21.504 21.504 0 0 1-21.34 21.626 21.504 21.504 0 0 1-21.34-21.626V827.474c0-11.96 9.543-21.668 21.299-21.668 11.796 0 21.38 9.708 21.38 21.668v157.082z m71.147-82.043c0 11.796-9.42 21.34-21.053 21.34a21.217 21.217 0 0 1-21.013-21.34v-75.367c0-11.755 9.421-21.299 21.013-21.299 11.632 0 21.053 9.544 21.053 21.3v75.366z"
          fill=""
          p-id="6339"
        ></path>
      </svg>
    </div>
  </BackToTop>
</template>
<script setup>
import { ref } from "vue";
import BackToTop from "@/components/BackToTop.vue";
const activeNames = ref(["1", "2", "3", "4"]);
</script>
<style lang="scss" scoped>
* {
  font-family: "Helvetica Neue" !important;
}

.title {
  text-align: left;

  p {
    font-size: 32px;
    font-weight: 700;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
}

.row {
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  text-align: left;

  h3 {
    line-height: 30px;
    font-size: 22px;
    color: #337ab7;
    cursor: pointer;

    a:hover {
      color: #0c4270 !important; // 使用!important确保hover效果不被覆盖
      text-decoration: underline;
    }
  }

  h4 {
    margin-left: 50px;
    font-size: 18px;

    a:hover {
      color: #0c4270 !important; // 使用!important确保hover效果不被覆盖
      text-decoration: underline;
    }
  }
}

.cardBox {
  border: 1px solid #337ab7;
  text-align: left;
  border-radius: 4px;
  margin-bottom: 20px;

  .dashedBorder {
    border-width: 3px;
    border-style: dotted;
    border-color: black;
    padding: 15px;
  }

  .itemFontSize {
    font-size: 17px;
    text-align: left;
  }

  .card_title {
    font-size: 17px;
    color: #fff;
    padding: 10px 15px;
    background: #337ab7;
    font-weight: 550;
  }

  .card_content {
    padding: 15px;
    line-height: 1.5;
    font-size: 17px;
    text-align: justify !important;
    text-justify: inter-word !important;
    font-size: 18px !important;
  }

  .image {
    padding: 20px 150px;

    img {
      width: 100%;
    }
  }
}

::v-deep .el-collapse-item__header {
  width: 500px;
  height: 37px;
  margin: 20px auto;
  font-size: 16px;
  background: #31b0d5;
  border-color: #269abc;
  color: #fff;
  display: flex;
  justify-content: center;

  .el-icon {
    display: none;
  }
}

::v-deep .el-collapse-item__title {
  text-align: center;
}

hr {
  margin-top: 10px;
  margin-bottom: 10px;
  border: 0;
  border-top: 1px solid #eee;
}

.highlight {
  color: #067ebb;
}

.alignment {
  text-align: justify !important;
  text-justify: inter-word !important;
  /* 优化单词间距 */
  /* 允许断字 */
  font-size: 18px !important;
}

::v-deep .el-collapse-item__header {
  font-weight: 550;
}
</style>
